define([
        'jquery', 'lib/snap.svg'
], function($,Snap){
	
	function ThumbnailView() {
		this.svgURL = 'http://www.w3.org/2000/svg';
		this.thumbnailController = null;
		this.mainController = null;
		this.eachThumbNail_y = 10;
		this.eachThumNail_y_span =100;
		this.thumbNailSVG = null;
	
		
	};
	
	ThumbnailView.prototype = {
			
			setController : function(mainController) {
				
				this.mainController = mainController;				
				this.thumbnailController = this.mainController.getThumbnailController();
			},
			
			doRender : function(slideList, pageNum) {
				
				console.log("thumbnail view doRender called");
				var width = $(document).width(); 
				var height = $(document).height();
				
				var containerDiv = $('#container');
				
				var thumbNailDiv = $('<div></div>').attr({id: "thumbnail"});
				var thumbNailSvg = $(document.createElementNS(this.svgURL, "svg"));
				thumbNailDiv.css('height', height-(102)+'px');
				thumbNailSvg.attr('id', "thumbNailSvg");
				
				thumbNailDiv.append(thumbNailSvg);
				containerDiv.append(thumbNailDiv);
				
				this.initThumbNailSVG(pageNum);
			},
			
			initThumbNailSVG : function(pageNum) {
				this.thumbNailSVG = Snap('#thumbNailSvg');

				var eachThumbNail = this.thumbNailSVG.rect(46.5, this.eachThumbNail_y + (pageNum-1)*this.eachThumNail_y_span, 128 , 73);
				eachThumbNail.attr({fill: "#ffffff", 
									"stroke" : "red", 
									"stroke-width": "7",
									id:"slide" + pageNum});
				
				var pageNumSpace = this.thumbNailSVG.text(30, 13+(pageNum-1)*this.eachThumNail_y_span, pageNum);
				
				var inner_g = this.thumbNailSVG.g();
				inner_g.attr({
					"transform" : "translate(46.5,"+(this.eachThumbNail_y + (pageNum-1)*this.eachThumNail_y_span)+") scale(0.09) "});
				
				$('#slide'+(pageNum-1)).attr({stroke: "white", "stroke-width": "1"});
				
				var g = this.thumbNailSVG.g(eachThumbNail,pageNumSpace,inner_g).attr({"class": "thumbNail_slide"});
				eachThumbNail.click($.proxy(this.thumbnailController.clickThumbNailSlide, this.thumbnailController));
			},
			
			addSlideToShow : function(pageNum) { //ThumNail과 workSpace 모두 슬라이드 추가하는 메소드
				

				var eachThumbNail = this.thumbNailSVG.rect(46.5, this.eachThumbNail_y + (pageNum-1)*this.eachThumNail_y_span, 128 , 73);
				eachThumbNail.attr({
					fill: "#ffffff", 
					"stroke" : "red", 
					"stroke-width": "7",
					id:"slide" + pageNum});
				
				var pageNumSpace = this.thumbNailSVG.text(30, 13+(pageNum-1)*this.eachThumNail_y_span, pageNum);
				
				var inner_g = this.thumbNailSVG.g();
				inner_g.attr({
					"transform" : "translate(46.5,"+(this.eachThumbNail_y + (pageNum-1)*this.eachThumNail_y_span)+") scale(0.09) "});
				$('#slide'+(pageNum-1)).attr({stroke: "white", "stroke-width": "1"});
				
				var g = this.thumbNailSVG.g(eachThumbNail,pageNumSpace,inner_g).attr({"class": "thumbNail_slide"});
				
				eachThumbNail.click($.proxy(this.thumbnailController.clickThumbNailSlide, this.thumbnailController));
			},
			
			removeBoundary : function(currentSlideNum) {
				$('#slide'+currentSlideNum).attr({"stroke": "white", "stroke-width" : "1"});
			},
			
			displayBoundary : function(currentSlideNum) {
				$('#slide'+currentSlideNum).attr({"stroke": "red", "stroke-width" : "7"});
			},
			
			thumbNailSlideClick : function(e) {
				if(this.currentSlideNum != null) { //있다면
					$('#slide'+this.currentSlideNum).attr({"stroke": "white"});
				}
				
				var textValue = e.target.id;
				var slideNumber = textValue.split("e");
				this.currentSlideNum = slideNumber[1];

				$('#slide'+this.currentSlideNum).attr({"stroke": "red", "stroke-width" : "7"});
			},
			
			reflectThumbnail: function(slide_svg_children) {
				var currentThumbnail = $('#thumbNailSvg').children(".thumbNail_slide").eq(this.mainController.currentSlideNum-1);
				currentThumbnail.children('g').eq(0).append(slide_svg_children);
				currentThumbnail.children('g').children('#controlBox').remove();
				currentThumbnail.children('g').children('.controlPoint').remove();
				
			}
	};
	
	return ThumbnailView;

});